<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>预约登记管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#searchForm div.ui-input-text {
			padding: 0.4em;
			width:10em;
			display:inline-block;
		}
		#searchForm div.ui-input-button {
			padding: 0.4em;
			display:inline-block;
		}
	</style>
	
</head>
<body>
	<div class="icon-buttons">
		<input type="button" class="leave-clean-session" data-inline="true" data-icon="back" data-iconpos="notext" value="返回"/>
	</div>
	<form:form id="searchForm" modelAttribute="storeReserve" action="${ctx}/cash/storeReserve/" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<div class="middleCls">
			<a href="${ctx}/cash/storeReserve/form" data-role="button" data-inline="true">添加预约</a>
			<label>开始日期：</label>
			<input type="date" id="startDate" data-inline="true" name="startDate" value="${startDate}"/>
			<label>结束日期：</label>
			<input type="date" id="endDate" data-inline="true" name="endDate" value="${endDate}"/>
			<input data-inline="true" type="submit" value="查询"/>
		</div>
	</form:form>
	<tags:message content="${message}"/>
	<div class="form-input">
		<h3 class="middleCls">预约信息列表</h3>
		<table id="contentTable" data-role="table" class="ui-responsive table-stroke">
			<thead><tr><th>登记时间</th><th>预约时间</th><th>预约人</th><th>预约人手机</th><th>是否会员</th><th>预约美容师</th><th>操作</th></tr></thead>
			<tbody>
			<c:if test="${empty page.list}">
				<tr>
					<td colspan="7">无记录</td>
				</tr>
			</c:if>
			<c:if test="${not empty page.list}">
				<c:forEach items="${page.list}" var="storeReserve">
					<tr id="${storeReserve.id}">
						<td>
							${fns:formatDate(storeReserve.requestTime, "yyyy-MM-dd")}
						</td>
						<td>
							${fns:formatDate(storeReserve.reserveTime, "yyyy-MM-dd")}
						</td>
						<c:if test="${empty storeReserve.member}">
							<td>${storeReserve.customerName}</td>
							<td>${fns:replaceTel(storeReserve.customerMobile)}</td>
							<td>散客</td>
						</c:if>
						<c:if test="${not empty storeReserve.member}">
							<td>${storeReserve.member.name}</td>
							<td>${fns:replaceTel(storeReserve.member.mobile)}</td>
							<td>会员</td>
						</c:if>
						<td>${storeReserve.employee.name}</td>
						<td class="operateTD" id="${storeReserve.id}">
							<input type="button" data-inline="true" data-iconpos="notext" data-icon="delete" value="删除"/>
						</td>
					</tr>
				</c:forEach>
			</c:if>
			</tbody>
		</table>
		<div class="pagination">${page}</div>
	</div>
	<div data-role="popup" id="storeReservePopupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="width:600px;" class="ui-corner-all">
	    <div data-role="header" data-theme="a" class="ui-corner-top">
	        <h1>预约详情</h1>
	    </div>
	    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
	    	<h4>
		    	到店时间：<label id="reserveTime" style="display: inline;">2014-01-01</label><br/><br/>
		    	客户：<label id="reserveCustomer" style="display: inline;">甲(123)</label><br/><br/>
		    	美容师：<label id="reserveEmployee" style="display: inline;">乙</label>
	    	</h4>
	        <table id="content" data-role="table" class="ui-responsive table-stroke">
		        <thead>
					<tr>
						<th>预约内容</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
	    </div>
	    <div data-theme="a" data-role="footer" style="text-align:center;">
	        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">关闭</a>
	    </div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
		 	jQuery("#searchForm").validate({
		 		submitHandler: function(form){
					var startValue = $("#startDate").val();
					var endValue = $("#endDate").val();
					if(startValue && endValue){
						 var start = new Date(startValue.replace(/-/g, "/"));
						 var end = new Date(endValue.replace(/-/g, "/"));
						 if (end < start) {
							showTip("结束日期不能大于开始日期!");
							return;
						}
					 }
					 loading("正在提交，请稍等...");
					 form.submit();
				}
	        });
		 	$("#contentTable tbody tr").click(function(e){
				if (!this.id) {
					return;
				}
				$("#contentTable tbody tr").removeClass("select_active");
				$(this).addClass("select_active");
				showDetail(this.id);
			});
			$("body").click(function(e){
				$(".ui-icon-arrow-u").removeClass("ui-icon-arrow-u").addClass("ui-icon-arrow-d");
				$(".opreation").remove();
			});
		 	$(".operateTD").click(function(){
				var url = "${ctx}/cash/storeReserve/delete?id=" + this.id;
				bossLoginDeletePopup("确定要删除此预约信息？", url);
			});
		});
		function page(n,s){
			$("#pageNo").val(n);
			$("#pageSize").val(s);
			$("#searchForm").submit();
        	return false;
        }
		var item;
		function operateMenu(id){
			item = $("#opreation-"+ id);
			$(".ui-icon-arrow-u").removeClass("ui-icon-arrow-u").addClass("ui-icon-arrow-d");
			if(item.length > 0) {
				item.remove();
				this.event.stopPropagation();
				return;
			}
			$("#"+id + " .ui-icon-arrow-d").removeClass("ui-icon-arrow-d").addClass("ui-icon-arrow-u");
			$(".opreation").remove();
			var html= "<tr id='opreation-" + id + "' class='opreation'><td colspan='7'>";
				html += "<a data-role='button' data-inline='true' href='${ctx}/cash/storeReserve/form?id=" + id + "'>修改</a>";
				html += "<a class='menu-del' data-role='button' data-inline='true' href='#'>删除</a></td></tr>";
			var del = function(){
				var url = "${ctx}/cash/storeReserve/delete?id=" + id;
				bossLoginDeletePopup("确定要删除此预约信息？", url);
			};
			
			$(".menu-del").die().live('click',del);
			$("#" + id).after(html);
			$("#contentTable").trigger("create");
			this.event.stopPropagation();
		}
		function showDetail(id){
			$.ajax({  
		          type : 'GET',
		          url: "${ctx}/cash/storeReserve/detail?id=" + id, 
		          success : function(jsonData) {
                  if(jsonData){
                	 var json = jQuery.parseJSON(jsonData);
					$("#reserveCustomer").html(json.customerName + "&nbsp;&nbsp;(" + json.customerMobile +")");
					$("#reserveEmployee").html(json.employeeName + "&nbsp;&nbsp;");
					$("#reserveTime").html(json.reserveTime);
					$("#content tbody").html("");
					var content = "<tr><td style='word-break:break-all'>" + json.reason + "</td></tr>";
					$("#content tbody").append(content);
					$('#storeReservePopupDialog').popup('open');
                  }   
              }, error:function(){   
                  alert("加载失败");   
              }   
          });
		}
	</script>
</body>
</html>
